<template>

  <f7-page  class="readpage">
    <f7-navbar
      v-if="tapped==true"
      class="readbook-nav" back-link="Back" :title="chapterData.chapterTitle" :hide="true"></f7-navbar>
    <!--{{chapterData.currentChapterContent}}-->
    <div @click="screenClick" class="read-content" >
      <p class="chapterp" v-for="(item,index) in chapterData.currentChapterContent">
        {{item}}
      </p>
    </div>
    <div v-if="tapped==true" class="footer">
      <div class="footer-button">
        <a :href="`/bookindex?bookid=${bookid}`" style="color: #ffffff;" >
          <f7-icon if-ios="f7:menu" if-md="material:menu"></f7-icon>
          <div class="sub-text">目录</div>
        </a>
      </div>
      <div class="footer-button">
        <f7-icon if-ios="f7:circle_half" if-md="material:brightness_2"></f7-icon>
        <div class="sub-text">夜间</div>
      </div>
      <div class="footer-button">
        <f7-icon if-ios="f7:settings" if-md="material:format_color_text"></f7-icon>
        <div class="sub-text">设置</div></div>
      <div class="footer-button">
        <f7-icon if-ios="f7:cloud_download" if-md="material:cloud_download"></f7-icon>
        <div class="sub-text">缓存</div></div>
      <div class="footer-button">
        <f7-icon if-ios="f7:chat" if-md="material:chat"></f7-icon>
        <div class="sub-text">评论</div></div>
    </div>
  </f7-page>
</template>

<script>
    import LocalSave from "../js/localSave";
    import Config from "../js/config";

    export default {
      data:function () {
        var options = this.$f7route.query;
        console.log(options)
        return {
          bookid:options.bookid,
          chapterid:options.chapterid,
          chapterData:{},
          tapped:true
        }
      },
      created:function () {
        var ls = new LocalSave();
        var c = new Config();
        var url = c.baseUrl +"/chapter/"+this.bookid+"/"+this.chapterid;
        var r = this.$request;
        var that = this;

        var chapterKey = "bookid:"+this.bookid+"&chapterid:"+this.chapterid;
        if (!ls.get(chapterKey)){
          r.get(url,function (res) {
            console.log(res);
            var remoteData = JSON.parse(res);
            that.chapterData = remoteData.data;
            console.log(remoteData.data)
            ls.save(chapterKey,remoteData.data);
          })
        } else {
          this.chapterData = ls.get(chapterKey);
        }

      },
      methods:{
        screenClick (params) {
          var bodyHeight = document.body.clientHeight;
          var bodyWidth = document.body.clientWidth;
          console.log(bodyHeight)
          console.log(bodyWidth)
          console.log("你好");
          console.log(params)
          var clientY = params.clientY
          console.log(clientY);
          console.log("文档高度")


          var dom = document.getElementsByClassName("read-content");
          console.log(dom)

          if (this.tapped){
            this.tapped = false
          } else {
            if (clientY > bodyHeight /3 && clientY <bodyHeight/3*2){
              this.tapped = true;
            } else if (clientY <bodyHeight/3){
              //TODO 向上翻页
              console.log("向上")
              dom.scrollTop = bodyHeight
            } else {
              //TODO 向下翻页
              console.log("向下翻页")
              document.documentElement.scrollTop = 1200
            }
          }

        }
      }
    }
</script>

<style scoped>
  .readbook-nav{
    background-color: black !important;
    opacity:0.7;
  }
  .readpage{
    background-image: url("../img/skin-default-m.35905.jpg");
  }
  .read-content{
    padding: 15px;
    letter-spacing: 2px;
  }
  .chapterp {
    text-indent: 2em;
  }
  .footer {
    position: fixed;
    bottom: 0px;
    height: 60px;
    width: 100%;
    z-index: 9999;
    background-color: black;
    display: flex;
    opacity:0.7;
  }
  .footer-button {
    margin-top: 7px;
    width: 20%;
    text-align: center;
    color: white;

  }
</style>
